<template>
  <!-- data-wow-duration（动画持续时间）和 data-wow-delay（动画延迟时间） -->
  <!-- data-wow-offset（元素的位置露出后距离底部多少像素执行）和data-wow-iteration（动画执行次数） -->
  <div>
    <div class="dowebok">
      <div class="row">
        <div class="wow rollIn bg-blue"></div>
        <div class="wow bounceInDown bg-green">WOW.js</div>
        <div class="wow lightSpeedIn bg-purple"></div>
      </div>
      <div class="row">
        <div class="wow rollIn bg-yellow" data-wow-delay="0.5s">简单易用</div>
        <div
          class="wow pulse bg-red"
          data-wow-iteration="5"
          data-wow-duration="0.15s"
        ></div>
        <div class="wow bounceInRight bg-blue">轻量级</div>
      </div>
      <div class="row">
        <div class="wow bounceInLeft bg-green"></div>
        <div class="wow flipInX bg-purple">WOW.js</div>
        <div class="wow bounceInRight bg-yellow"></div>
      </div>
      <div class="row">
        <div class="wow rollIn bg-blue">无需 jQuery</div>
        <div
          class="wow shake bg-red"
          data-wow-iteration="5"
          data-wow-duration="0.15s"
        ></div>
        <div class="wow swing bg-purple" data-wow-iteration="2">纯 JS</div>
      </div>
      <div class="row">
        <div class="wow rollIn bg-red"></div>
        <div class="wow bounceInU bg-yellow" data-wow-delay="0.5s">WOW.js</div>
        <div
          class="wow lightSpeedIn bg-green"
          data-wow-delay="0.5s"
          data-wow-duration="0.15s"
        ></div>
      </div>
      <div class="row">
        <div class="wow bounceInLeft bg-purple">依赖 animate.css</div>
        <div
          class="wow pulse bg-blue"
          data-wow-iteration="5"
          data-wow-duration="0.25s"
        ></div>
        <div class="wow lightSpeedIn bg-yellow">多种动画</div>
      </div>
      <div class="row">
        <div
          class="wow bounce bg-green"
          data-wow-iteration="5"
          data-wow-duration="0.15s"
        ></div>
        <div class="wow bounceInUp bg-red">WOW.js</div>
        <div class="wow bounceInRight bg-purple"></div>
      </div>
      <div class="row">
        <div class="wow rollIn bg-red" data-wow-delay="0.5s">
          无需 jQuery！？
        </div>
        <div class="wow bounceInDown bg-green" data-wow-delay="1s"></div>
        <div class="wow bounceInRight bg-yellow" data-wow-delay="1.5s">
          谢谢
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {},
  created() {},
  mounted() {
    this.$wow.init();
  }
};
</script>
<style lang="less" scoped>
.dowebok {
  margin: 0 auto;
}

.dowebok ul {
  list-style-type: none;
}

.dowebok .row {
  font-size: 0;
  text-align: center;
}

.dowebok .wow {
  display: inline-block;
  width: 280px;
  height: 280px;
  margin: 30px 15px 0;
  border-radius: 50%;
  font: 30px/280px "Microsoft Yahei";
  vertical-align: top;
  *display: inline;
  zoom: 1;
}

.bg-green {
  background: #5bd5a0;
}

.bg-blue {
  background: #1daee9;
}

.bg-purple {
  background: #c843a5;
}

.bg-red {
  background: #eb3980;
}

.bg-yellow {
  background: #ffcc35;
}
</style>
